<template>
  <div class="pigsty-air-container">
    <!-- 标题区域 -->
    <div class="header">
      <div class="title-section">
        <h1 class="main-title">智能风扇</h1>
        <span class="location">当前位置：智慧农业-猪舍区</span>
      </div>
      <button class="back-btn" @click="handleBack">返回</button>
    </div>

    <!-- 数据展示区域 -->
    <div class="data-grid">
      <!-- 空气温度卡片 -->
      <div class="data-card" :class="getTemperatureClass()">
        <div class="data-icon">🌡️</div>
        <div class="data-info">
          <h3 class="data-name">空气温度</h3>
          <p class="data-value">
            {{ farmData.temperature !== null ? `${farmData.temperature} °C` : '无数据' }}
          </p>
          <p class="data-status">{{ getTemperatureStatus() }}</p>
        </div>
      </div>

      <!-- 空气湿度卡片 -->
      <div class="data-card" :class="getHumidityClass()">
        <div class="data-icon">💧</div>
        <div class="data-info">
          <h3 class="data-name">空气湿度</h3>
          <p class="data-value">
            {{ farmData.humidity !== null ? `${farmData.humidity} %` : '无数据' }}
          </p>
          <p class="data-status">{{ getHumidityStatus() }}</p>
        </div>
      </div>

      <!-- 一氧化碳浓度卡片 -->
      <div class="data-card" :class="getCoClass()">
        <div class="data-icon">⚠️</div>
        <div class="data-info">
          <h3 class="data-name">一氧化碳浓度</h3>
          <p class="data-value">
            {{ farmData.coConcentration !== null ? farmData.coConcentration : '无数据' }}
          </p>
          <p class="data-status">{{ getCoStatus() }}</p>
        </div>
      </div>
    </div>

    <!-- 折线图筛选选项 -->
    <div class="chart-filter">
      <button
          class="filter-btn"
          :class="{ 'active': selectedType === 'temperature' }"
          @click="handleFilterClick('temperature')"
      >
        空气温度
      </button>
      <button
          class="filter-btn"
          :class="{ 'active': selectedType === 'humidity' }"
          @click="handleFilterClick('humidity')"
      >
        空气湿度
      </button>
      <button
          class="filter-btn"
          :class="{ 'active': selectedType === 'coConcentration' }"
          @click="handleFilterClick('coConcentration')"
      >
        一氧化碳浓度
      </button>
    </div>

    <!-- 折线图容器 -->
    <div class="chart-container">
      <div id="trend-chart" class="chart"></div>
    </div>

    <!-- 状态信息 -->
    <div class="status-bar">
      <span v-if="isLoading">数据加载中...</span>
      <span v-else-if="!isSystemOnline" class="offline-warning">
        ⚠️ 离线模式，显示最近缓存数据
      </span>
      <span v-else>最后更新：{{ lastUpdateTime || '未更新' }}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed, ref, onUnmounted } from 'vue'
import { useFarmStore } from '@/stores/farm'
import { useRouter } from 'vue-router'
// 引入ECharts
import * as echarts from 'echarts'

// 初始化仓库和路由
const farmStore = useFarmStore()
const router = useRouter()

// 原有状态数据（保持不变）
const farmData = computed(() => farmStore.farmData)
const isLoading = computed(() => farmStore.isLoading)
const isSystemOnline = computed(() => farmStore.isSystemOnline)
const lastUpdateTime = computed(() => farmStore.lastUpdateTime)

// 新增：图表相关状态
const selectedType = ref('') // 选中的指标类型
const chartInstance = ref(null) // 图表实例
const historyData = ref({ // 存储历史数据
  temperature: [],
  humidity: [],
  coConcentration: []
})

// 页面加载：先获取猪舍数据，再初始化图表
onMounted(async () => {
  // 1. 获取猪舍实时数据（原有逻辑）
  await farmStore.fetchPigstyData()

  // 2. 初始化图表
  initChart()

  // 3. 定时刷新（原有逻辑）
  const refreshInterval = setInterval(async () => {
    await farmStore.fetchPigstyData()
    // 若已选中图表类型，同步刷新历史数据
    if (selectedType.value) {
      await fetchHistoryData(selectedType.value)
      updateChart()
    }
  }, 30000)

  // 4. 组件卸载清理
  onUnmounted(() => {
    clearInterval(refreshInterval)
    if (chartInstance.value) {
      chartInstance.value.dispose()
      window.removeEventListener('resize', handleResize)
    }
  })
})

// 返回按钮（原有逻辑）
const handleBack = () => {
  router.push('/dashboard/smart-pigsty')
}

// 温度状态判断（原有逻辑）
const getTemperatureStatus = () => {
  const temp = farmData.value.temperature
  if (temp === null) return '无数据'
  if (temp >= 20 && temp <= 28) return '适宜'
  if ((temp >= 15 && temp < 20) || (temp > 28 && temp <= 32)) return '警示'
  return '危险'
}

// 温度样式类（原有逻辑）
const getTemperatureClass = () => {
  switch (getTemperatureStatus()) {
    case '适宜': return 'status-normal'
    case '警示': return 'status-warning'
    case '危险': return 'status-danger'
    default: return 'status-none'
  }
}

// 湿度状态判断（原有逻辑）
const getHumidityStatus = () => {
  const humidity = farmData.value.humidity
  if (humidity === null) return '无数据'
  if (humidity >= 60 && humidity <= 75) return '适宜'
  if ((humidity >= 50 && humidity < 60) || (humidity > 75 && humidity <= 85)) return '警示'
  return '危险'
}

// 湿度样式类（原有逻辑）
const getHumidityClass = () => {
  switch (getHumidityStatus()) {
    case '适宜': return 'status-normal'
    case '警示': return 'status-warning'
    case '危险': return 'status-danger'
    default: return 'status-none'
  }
}

// 一氧化碳状态判断（原有逻辑）
const getCoStatus = () => {
  const co = farmData.value.coConcentration
  if (co === null) return '无数据'
  if (co >= 0 && co < 10000) return '适宜'
  if (co >= 10000 && co < 20000) return '警示'
  return '危险'
}

// 一氧化碳样式类（原有逻辑）
const getCoClass = () => {
  switch (getCoStatus()) {
    case '适宜': return 'status-normal'
    case '警示': return 'status-warning'
    case '危险': return 'status-danger'
    default: return 'status-none'
  }
}

// ---------------------- 修复后的折线图核心逻辑 ----------------------
// 1. 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('trend-chart')
  if (!chartDom || !echarts) return

  chartInstance.value = echarts.init(chartDom)

  // 空图表配置
  const emptyOption = {
    title: {
      text: '猪舍环境数据变化趋势',
      subtext: '请选择下方指标查看历史数据',
      left: 'center',
      textStyle: { fontSize: 16 },
      subtextStyle: { fontSize: 14, color: '#999' }
    },
    grid: { left: '10%', right: '5%', bottom: '15%' },
    xAxis: { type: 'category', data: [], axisLine: { color: '#eee' } },
    yAxis: { type: 'value', axisLine: { color: '#eee' }, splitLine: { color: '#f5f5f5' } },
    series: [{ data: [], type: 'line', smooth: true, lineStyle: { width: 0 } }],
    tooltip: {
      backgroundColor: 'rgba(0,0,0,0.7)',
      textStyle: { color: '#fff' },
      // 修复1：空图表时Tooltip也加容错
      formatter: (params) => {
        if (!params || !params.length) return '无数据'
        const item = params[0]
        return item.name ? `${item.name}<br/>无具体数据` : '无数据'
      }
    }
  }

  chartInstance.value.setOption(emptyOption)

  // 绑定窗口缩放事件
  window.addEventListener('resize', handleResize)
}

// 2. 图表自适应缩放
const handleResize = () => {
  chartInstance.value?.resize()
}

// 3. 筛选按钮点击事件
const handleFilterClick = async (type) => {
  selectedType.value = type
  await fetchHistoryData(type)
  updateChart()
}

// 4. 获取历史数据
const fetchHistoryData = async (type) => {
  try {
    const res = await farmStore.fetchHistoryData(type, 20)
    historyData.value[type] = res?.filter(item => item.time && item.value !== null) || []
  } catch (err) {
    console.error(`获取${getTypeName(type)}历史数据失败:`, err)
    historyData.value[type] = []
  }
}

// 5. 辅助：指标类型转中文名称
const getTypeName = (type) => {
  const nameMap = {
    temperature: '空气温度',
    humidity: '空气湿度',
    coConcentration: '一氧化碳浓度'
  }
  return nameMap[type] || type
}

// 6. 更新图表数据（核心修复）
const updateChart = () => {
  if (!chartInstance.value || !selectedType.value) return

  // 图表配置
  const config = {
    temperature: { title: '空气温度变化趋势', unit: '°C', color: '#4caf50' },
    humidity: { title: '空气湿度变化趋势', unit: '%', color: '#2196f3' },
    coConcentration: { title: '一氧化碳浓度变化趋势', unit: '', color: '#f44336' }
  }[selectedType.value]

  // 提取数据
  const dataList = historyData.value[selectedType.value]
  const xData = dataList.map(item => item.time)
  const yData = dataList.map(item => item.value)

  // 修复2：Tooltip格式化函数增加多层容错
  const tooltipFormatter = (params) => {
    // 容错1：判断params是否存在且有长度
    if (!params || !params.length) return '无数据'
    const item = params[0]
    // 容错2：判断item和item.name是否存在
    if (!item || !item.name) return '无数据'
    // 容错3：判断item.value是否存在
    const value = item.value !== null && item.value !== undefined ? item.value : '无'
    return `${item.name}<br/>${config.title}：${value}${config.unit}`
  }

  // 图表配置项
  const option = {
    title: { text: config.title, left: 'center', textStyle: { color: config.color } },
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: { rotate: 45, interval: xData.length > 10 ? Math.ceil(xData.length/10) : 0 }
    },
    yAxis: { type: 'value', name: config.unit, nameTextStyle: { color: config.color } },
    series: [{
      data: yData.map((val, i) => ({ name: xData[i], value: val })),
      type: 'line',
      smooth: true,
      lineStyle: { color: config.color, width: 3 },
      itemStyle: { color: config.color, borderRadius: 5 },
      symbol: 'circle',
      symbolSize: 6,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0,0,0,1, [
          { offset: 0, color: `${config.color}80` },
          { offset: 1, color: `${config.color}10` }
        ])
      }
    }],
    tooltip: {
      formatter: tooltipFormatter // 使用修复后的格式化函数
    }
  }

  // 应用配置到图表
  chartInstance.value.setOption(option, true)
}
</script>

<style scoped>
.pigsty-air-container {
  min-height: 100vh;
  padding: 20px;
  background-color: #f8faf7;
  color: #333;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

/* 标题区域样式（原有） */
.header {
  margin-bottom: 30px;
}

.title-section {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.main-title {
  color: #2e7d32;
  margin: 0;
  font-size: 28px;
}

.location {
  margin-left: 15px;
  color: #666;
  font-size: 14px;
  align-self: flex-end;
  margin-bottom: 5px;
}

.back-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #388e3c;
}

/* 数据网格样式（原有） */
.data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.data-card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-top: 4px solid #ccc;
}

.data-icon {
  font-size: 40px;
  margin-right: 20px;
  min-width: 50px;
  text-align: center;
}

.data-info {
  flex: 1;
}

.data-name {
  margin: 0 0 10px 0;
  color: #555;
  font-size: 18px;
}

.data-value {
  margin: 0 0 5px 0;
  font-size: 28px;
  font-weight: bold;
}

.data-status {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* 状态颜色样式（原有） */
.status-normal {
  border-top-color: #4caf50;
}
.status-normal .data-value, .status-normal .data-status { color: #4caf50; }

.status-warning {
  border-top-color: #ffc107;
}
.status-warning .data-value, .status-warning .data-status { color: #ffc107; }

.status-danger {
  border-top-color: #f44336;
}
.status-danger .data-value, .status-danger .data-status { color: #f44336; }

.status-none .data-value, .status-none .data-status { color: #9e9e9e; }

/* 图表筛选按钮样式 */
/* 接上面未完成的 style 部分 */
.chart-filter {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  padding: 0 10px;
}

.filter-btn {
  background: white;
  border: 2px solid #4caf50;
  color: #4caf50;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
  box-sizing: border-box;
}

.filter-btn:hover {
  background-color: #f1f8e9;
}

.filter-btn.active {
  background-color: #4caf50;
  color: white;
}

/* 折线图容器样式 */
.chart-container {
  width: 100%;
  height: 400px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  box-sizing: border-box;
}

.chart {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* 状态条样式（原有） */
.status-bar {
  text-align: center;
  padding: 10px;
  color: #666;
  font-size: 14px;
}

.offline-warning {
  color: #ff9800;
  font-weight: 500;
}

/* 响应式调整（补充图表适配） */
@media (max-width: 768px) {
  .data-grid {
    grid-template-columns: 1fr;
  }

  .title-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .location {
    margin-left: 0;
    margin-top: 5px;
  }

  /* 筛选按钮适配移动端 */
  .chart-filter {
    gap: 10px;
  }

  .filter-btn {
    flex: 1;
    min-width: 110px;
    padding: 8px 12px;
    font-size: 14px;
  }

  /* 图表高度适配移动端 */
  .chart-container {
    height: 300px;
  }

  /* 图表文字大小适配 */
  .chart :deep(.ec-xtick-label) {
    font-size: 11px !important;
  }
  .chart :deep(.ec-yaxis-label) {
    font-size: 11px !important;
  }
}

/* 适配更小屏幕（375px以下） */
@media (max-width: 375px) {
  .pigsty-air-container {
    padding: 10px;
  }

  .main-title {
    font-size: 24px;
  }

  .data-card {
    padding: 15px;
  }

  .data-icon {
    font-size: 32px;
    margin-right: 15px;
  }

  .data-value {
    font-size: 24px;
  }

  .filter-btn {
    min-width: 90px;
    font-size: 13px;
    padding: 6px 8px;
  }

  .chart-container {
    height: 250px;
  }
}

</style>